<template>
  <div class="upload-file">
    <el-upload
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
      :limit="limit"
      :multiple="multiple"
      :auto-upload="autoUpload"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      :on-success="handleUploadSuccess"
      :show-file-list="showFileList"
      :headers="headers"
      :accept="acceptFiles"
      class="upload-file-uploader"
      ref="upload"
    >
      <!-- 上传按钮 -->
      <el-button slot="trigger" plain type="primary">上传</el-button>
      <!-- 上传提示 -->
      <!-- <div class="el-upload__tip" slot="tip">
        <template v-if="fileSize">
          文件大小：不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>；
        </template>

        <template v-if="fileType">
          支持格式： <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
        </template>
      </div> -->
    </el-upload>
  </div>
</template>

<script>
import { getTokenDecrypt } from "@/utils/auth";

export default {
  props: {
    // 值
    value: [String, Object, Array],
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    fileType: {
      type: Array,
      default: () => ["keytab", "conf"],
    },
    acceptFiles: {
      type: String,
      default: ".keytab,.conf",
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 1,
    },
    showFileList: {
      type: Boolean,
      default: true,
    },
    autoUpload: {
      type: Boolean,
      default: false,
    },
    initFileList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/notice/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getTokenDecrypt(),
      },
      fileList: [],
      fileRawList: [],
    };
  },
  computed: {},
  methods: {
    // submitUpload() {
    //   this.$refs.upload.submit();
    // },

    // 上传前校检类型和大小
    handleBeforeUpload(file) {
      //校验类型
      if (this.fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = this.fileType.some((type) => {
          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          this.$GlobalErrorConfirm(
            "上传失败",
            `文件格式不正确, 请上传 ${this.fileType.join("/")} 格式的文件!`
          );

          return true;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt =
          (file.size || file.size === 0 ? file.size : file.fileSize) /
            1024 /
            1024 <
          this.fileSize;

        if (!isLt) {
          this.$GlobalErrorConfirm(
            "上传失败",
            `文件大小不能超过 ${this.fileSize} MB!`
          );
          return true;
        }
      }
      return false;
    },
    // 文件个数超出
    handleExceed() {
      this.$GlobalErrorConfirm("上传失败", `最多只能上传${this.limit}个文件`);
    },
    // 上传失败
    handleUploadError(err) {
      this.$GlobalErrorConfirm("上传失败", err.msg);
    },

    // 上传成功回调
    handleUploadSuccess(res, file) {
      this.$GlobalSuccessMessage("上传成功");
      this.$emit("input", res.data.url);
    },
    // 删除文件
    handleDelete(index) {
      this.fileList.splice(index, 1);
      this.$emit("input", "");
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    },
  },
  created() {
    this.fileList = this.initFileList;
  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  display: flex;
  margin-bottom: 5px;
  ::v-deep .el-upload-list__item:first-child {
    margin: 5px 0 0 8px !important;
  }
}

::v-deep .el-upload-list__item {
  display: flex;
}
::v-deep .el-upload-list__item-status-label {
  position: relative;
}
::v-deep .el-upload-list__item .el-icon-close {
  position: relative;
}
</style>

<style lang="scss">
.el-message-box__message {
  word-break: break-all;
}
</style>
